<template>
  <div>
    <my-input v-model="value" placeholder="请输入电话号码"></my-input>
    <!-- <my-step v-model.number="value"></my-step>
    <my-pagination
      @currentChange="currentChange"
      :total="50"
      :page-size="pagesize"
      :page-num="pagenum"
      :page-sizes="[5, 10, 3, 4]"
      @sizeChange="sizeChange"
    ></my-pagination>
   

    <my-add v-model="title" @click="add"></my-add>
     -->
    <my-button @click.native="show = true">show mask</my-button>
    <my-mask :show="show" @hide="hide">
      <div>
        <h1>1111</h1>
        <h2>2222</h2>
      </div>
    </my-mask>

    <my-scroll
      url="https://cnodejs.org/api/v1/topics"
      :param="param"
      @send-data="sendData"
      pageNoName="page"
    >
      <div>
        <!--内容区-->
        <ul>
          <li
            v-for="item in list"
            style="font-size:20px;height:100px;"
            :key="item.id"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>
    </my-scroll>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "10",
      pagenum: 3,
      show: false,
      title: "111",
      pagesize: 10,
      url: "",
      param: {
        // page: 1,
        page: 1,
        limit: 10,
        tab: "ask",
      },
      list: [],
    };
  },
  methods: {
    currentChange(val) {
      this.pagenum = val;
    },
    sizeChange(size) {
      this.pagesize = size;
      console.log(this.pagesize);
    },

    hide() {
      console.log(111);
      this.show = false;
    },
    add() {
      console.log(this.title);
    },
    sendData(val) {
      console.log(val);
      this.list = val;
    },
  },
  created() {},
};
</script>
<style lang="scss"></style>
